<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>hello_react</title>
    </head>
    <style>
        .list {
            width: 200px;
            height: 150px;
            background-color: pink;
            overflow: auto;
        }

        .news {
            height: 30px;
        }
    </style>

    <body>
        <div id="test1"></div>

        <!-- 引入 react 核心库 -->
        <script src="./js/react.development.js" type="text/javascript"></script>
        <!-- React 对象 -->
        <script src="./js/react-dom.development.js" type="text/javascript"></script>
        <!-- ReactDOM 对象 -->
        <script src="./js/babel.min.js" type="text/javascript"></script>
        <!-- babel -->
        <script src="./js/prop-types.js" type="text/javascript"></script>
        <!-- PropTypes -->

        <script type="text/babel">
            class NewsList extends React.Component {
                state = {
                    newsArr: []
                }
                componentDidMount() {
                    setInterval(() => {
                        const { newsArr } = this.state
                        const news = '新闻' + (newsArr.length + 1)
                        this.setState({
                            newsArr: [news, ...newsArr]
                        })
                    }, 1000)
                }
                getSnapshotBeforeUpdate() {
                    return this.refs.list.scrollHeight
                }
                componentDidUpdate(preProps, preState, height) {
                    this.refs.list.scrollTop += this.refs.list.scrollHeight - height
                }
                render() {
                    return (
                        <div className="list" ref="list">
                            {this.state.newsArr.map((item, index) => {
                                return (
                                    <div className="news" key={index}>
                                        {item}
                                    </div>
                                )
                            })}
                        </div>
                    )
                }
            }
            ReactDOM.render(<NewsList />, document.querySelector('#test1'))
        </script>
    </body>
</html>
